<template>
  <div >
    <el-dialog v-model="centerDialogVisible" :title="tilte" :width="width" :close-on-click-modal="closeOnClickModal"
      :modal="myModal" align-center :before-close="handleClose" destroy-on-close class="elDialog">
      <div class="body">
        <slot name="content"></slot>
      </div>
      <template #footer>
        <span class="dialog-footer" v-if="defaultButton">
          <el-button @click="Cancel">取消</el-button>
          <el-button type="primary" @click="Submit" :loading="confirmLoading" :disabled="confirmLoading">确认</el-button>
        </span>
        <slot name="custom" v-else></slot>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { toRefs, ref } from "vue";

const handleClose = (done: () => void) => {
  done();
  Cancel();
};

const props = defineProps({
  myModal: {
    type: Boolean,
    default: true,
  },
  closeOnClickModal: {
    type: Boolean,
    default: true,
  },
  // 弹窗标题
  tilte: {
    type: String,
    default: "Warning",
  },
  // 弹窗是否显示
  centerDialogVisible: {
    type: Boolean,
    default: false,
  },
  // 弹窗宽度
  width: {
    type: String,
    default: "20%",
  },
  // 是否显示默认按钮
  defaultButton: {
    type: Boolean,
    default: true,
  },
  confirmLoading: {
    type: Boolean,
    default: false,
  }
});

const emit = defineEmits(["Cancel", "Submit"]);

/**
 * 点击取消
 */
const Cancel = () => {
  emit("Cancel");
};
/**
 * 点击提交
 */
const Submit = () => {
  emit("Submit");
};

const { centerDialogVisible, tilte, width } = toRefs(props);
</script>

<style lang="less" scoped>
:deep(.el-dialog) {
  border-radius: 12px;
      // height: 650px;
  overflow-y: auto;
  overflow-x: hidden;
  box-shadow: 0 12px 32px 0 rgba(0, 0, 0, 0.08);

  .el-dialog__header {
    padding: 10px 0;
    margin-right: 0;
    text-indent: 24px;
    width: 100%;

    .el-dialog__title {
      font-size: 16px;
      font-family: "HarmonyOS_Sans_SC_Medium";
      color: #353a42;
      height: 16px;
      line-height: 16px;
    }

    .el-dialog__headerbtn {
      width: 36px;
      height: 36px;
      margin-right: 12px;
    }

    .el-dialog__headerbtn .el-dialog__close {
      font-size: 16px;
      font-family: "HarmonyOS_Sans_SC_Medium";
      width: 24px;
      height: 24px;
      color: #353a42;
    }
  }

  .el-dialog__footer {
    text-align: center;
    padding-top: 24px;
    padding-bottom: 24px;
  }
}

</style>
